<template>
  <div>
    <navs/>
    <div class="register">
      <div class="rg-box">
        <div class="rg-cont" >
          <!--客户注册-->
          <div class="rg-item" >
            <div class="rg-wrap lg-box">
              <div class="lg-nav">
                <div class="nav-item active">
                  <img src="../assets/img/phone.png"  alt="">
                  手机注册
                </div>
              </div>
              <div class="lg-form">
                <div class="form-item">
                  <div class="ipt-item" style="margin-top: 50px;">
                    <input type="text" v-model="mobile" placeholder="手机" class="form-control">
                  </div>
                  <div class="ipt-item" style="margin-bottom: 50px;margin-top: 50px;">
                    <input type="text" v-model="username" placeholder="用户名"  class="form-control">
                  </div>
                  <div class="ipt-item" style="margin-bottom: 50px;margin-top: 50px;">
                    <input type="password" v-model="password" placeholder="密码"  class="form-control">
                  </div>
                  <div class="ipt-item" style="margin-bottom: 50px;margin-top: 50px;">
                    <input type="password" v-model="confirm_password" placeholder="确认密码"  class="form-control">
                  </div>
                  <div class="tip-item" style="margin-bottom: 40px">
                    <label>
                      <input type="checkbox"  v-model="agree" checked="checked">
                      <i>
                        <img src="../assets/img/select.png" alt="">
                      </i>
                      同意并愿意遵守
                      <span><a href="">空心服务协议</a></span>
                    </label>
                  </div>
                  <a href="javascript:" @click="submit()" class="btn btn-primary">注册</a>
                </div>
              </div>
            </div>
            <div class="rg-wrap rg-role change11">
              <h3>我要下单</h3>
              <img src="../assets/img/Customer-2.png" alt="">
            </div>
          </div>


        </div>
      </div>
    </div>
    <footers/>
  </div>
</template>

<script>
  import navs from '../components/nav'
  import footers from '../components/footer'
  import axios from 'axios'
  export default {
    name: "register",
    data() {
      return {
        username:'',
        mobile:'',
        password:'',
        confirm_password:'',
        agree :true,
      }
    },
    methods: {
      submit(){
            if(this.mobile==''){
                alert("请输入手机号");
                return false;
            }

          if(this.username==''){
              alert("请输入用户名");
              return false;
          }

            if(this.password==''){
              alert("请输入密码");
              return false;
            }

            if(!this.agree){
              alert("请同意服务协议");
              return false;
            }

            var that=this;
            axios.post(this.HOST+'/api/User/register', {
                mobile: this.mobile,
                username:this.username,
                password: this.password,
                confirm_password:this.confirm_password
            })
                .then(function (response) {
                    var code=response.data.code;
                    if(code==1){
                        alert(response.data.msg);
                        that.$router.push({path:'/login'});
                    }else{
                        alert(response.data.msg);
                    }
                })
                .catch(function (response) {
                    console.log(response);
                });
        }
    },
    components: {
      navs,
      footers
    }
  }
</script>

<style scoped>
  img {
    vertical-align: middle;
  }
  .register {
    background: #f6f7fb;
    width: 100%;
    height: 100%;
    padding-bottom: 26px;
    min-height: 727px;
    /* margin-bottom: 155px; */
    padding-top: 35px;
  }
  .rg-box {
    position: relative;
    width: 860px;
    height: 600px;
    margin: 0 auto;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
  }
  .rg-cont {
    position: absolute;
    width: 100%;
    /*width: 2580px;*/
    /*font-size: 0;*/
    /*left: -860px;*/
    transition: all ease .5s;
  }
  /*.rg-cont.rg_cont2 {*/
    /*left: 0;*/
    /*transition: all ease .5s;*/
  /*}*/
  /*.rg-cont.rg_cont3 {*/
    /*left: -1720px;*/
    /*transition: all ease .5s;*/
  /*}*/
  .rg-item {
    /*display: inline-block;*/
    width: 860px;
    position: relative;
    display: flex;
    align-items: center;
  }
  .rg-wrap {
    display: inline-block;
    width: 430px;
    height: 500px;
    text-align: center;
    vertical-align: top;
    float: left;
  }
  .rg-item .rg-role h3 {
    font-size: 18px;
    font-weight: 300;
    color: #636363;
    margin: 50px 0 70px;
  }
  .rg-item .rg-role img {
    width: 285px;
    height: 231px;
    cursor: pointer;
    vertical-align: middle;
  }
  .btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    font-weight: 300;
  }
  .btn-primary {
    color: #fff;
    background-color: #428bca;
    border-color: #357ebd;
  }
  .rg-item .rg-role .btn {
    display: block;
    color: #fff;
    width: 120px;
    line-height: 22px;
    height: 36px;
    font-size: 14px;
    border-color: #4d5775;
    letter-spacing: 3px;
    margin: 45px auto 0;
    background-color: #4d5775;
    border-radius: 2px;
    font-weight: 300;
    padding: 6px 12px;
    cursor: pointer;
  }
  .rg-item .rg-role .btn:hover {
    background-color: #4d5775;
    border-color: #4d5775;
    opacity: 0.8;
  }
  .lg-box {
    width: 440px;
    height: 510px;
    margin: 100px auto;
    margin-bottom: 100px;
    margin-top: 120px;
    border-radius: 4px;
    box-shadow: 0 10px 10px #dedde3;
    background: #fff;
  }
  .rg-item .lg-box {
    margin: 0;
    box-shadow: none;
    padding: 0 40px;
  }
  .lg-box .lg-nav {
    font-size: 0;
    margin-bottom: 30px;
    margin-top: 0px;
  }
  .lg-box .lg-nav .nav-item {
    display: inline-block;
    width: 100%;
    line-height: 50px;
    border-bottom: 2px solid #eee;
    font-size: 16px;
    text-align: center;
    color: #666;
    cursor: pointer;
  }
  .lg-box .lg-nav .nav-item.active {
    border-bottom: 2px solid #3CC8B4;
    color: #3CC8B4;
  }
  .rg-item .lg-box .lg-nav .nav-item {
    line-height: 78px;
  }
  .rg-item .lg-box .lg-nav .nav-item img {
    margin: -2px 5px 0 0;
    display: inline;
  }
  .lg-box .ipt-item {
    position: relative;
    margin-bottom: 30px;
  }
  .form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.428571429;
    color: #555;
    vertical-align: middle;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  }
  .lg-box .ipt-item input {
    position: relative;
    z-index: 2;
    border: none;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    border-bottom: 1px solid #ededed;
  }
  .lg-box .ipt-item span {
    position: absolute;
    z-index: 3;
    left: 0;
    top: 0;
    color: #aaaab4;
    font-size: 14px;
    pointer-events: none;
    transition: all ease .3s;
  }
  .lg-box .ipt-item input:focus {
    border-color: #3CC8B4;
  }
  .lg-box .ipt-item input:focus ~ span {
    top: -20px;
    font-size: 14px;
    color: #3CC8B4;
    transition: all ease .3s;
  }
  .codebut {
    position: absolute;
    right: 0;
    top: 0;
    min-width: 100px;
    height: 35px;
    line-height: 33px;
    border: 1px solid #3462ff;
    color: #fff;
    text-align: center;
    font-size: 14px;
    border-radius: 3px;
    margin-top: 10px;
    background: #3462ff;
    font-family: "microsoft yahei","Open Sans";
    font-weight: 300;
  }
  .lg-box .ipt-item .butn {
    float: right;
    margin-top: -7px;
    z-index: 100;
    background: #fff;
    border: 0px;
    color: #3CC8B4;
    margin-right: -8px;
    cursor: pointer;
  }
  .lg-box .ipt-item .butn:HOVER {
    color: #999;
  }
  .lg-box .tip-item {
    margin-bottom: 13px;
    margin-top: 5px;
  }
  .rg-item .lg-box .tip-item {
    text-align: left;
    margin: 20px 0 0;
  }
  label {
    vertical-align: top;
    display: inline-block;
    width: 80px;
    text-align: right;
    margin-bottom: 5px;
  }
  .lg-box .tip-item label {
    font-size: 14px;
    cursor: pointer;
    color: #c8c8c8;
    font-weight: 300;
    width: 230px;
    text-align: left;
    display: flex;
    align-items: center;
  }
  .lg-box .tip-item input[type="checkbox"] {
    display: none;
  }
  .lg-box .tip-item label i {
    font-size: 12px;
    font-style: normal;
    display: inline-block;
    width: 14px;
    height: 14px;
    text-align: center;
    line-height: 12px;
    color: #fff;
    vertical-align: middle;
    margin: -2px 5px 1px 0px;
    border: 1px solid #d9d9d9;
  }
  .lg-box .tip-item input[type="checkbox"]:checked + i {
    color: #3CC8B4;
    background: #fff;
  }
  .lg-box .tip-item input[type="checkbox"] + i img{
    width: 12px;
    height: 10px;
    position: relative;
    bottom: 2px;
    display: none;
  }
  .lg-box .tip-item input[type="checkbox"]:checked + i img{
    display: inline-block;
  }
  .lg-box .tip-item a {
    float: right;
    color: #3CC8B4;
    font-size: 14px;
    position: relative;
    left: 3px;
  }
  .lg-box .btn {
    width: 100%;
    height: 40px;
    line-height: 26px;
    letter-spacing: 3px;
    background: #4D5775;
    border-color: #4D5775;
  }
  .rg-item .rg-role p {
    padding-right: 45px;
    text-align: right;
    margin-top: 65px;
  }
  .rg-item .rg-role p.enginner {
    padding-left: 45px;
    text-align: left;
  }
  .rg-item .rg-role p span {
    font-size: 14px;
    color: #9a9a9a;
    cursor: pointer;
  }
  .rg-item .rg-role .sf-btn1 img {
    width: 22px;
    height: 22px;
    position: relative;
    top: -2px;
  }
</style>
